<template>
  <!-- 手机详情 -->
  <div class="mobile">
    <input type="file" name="file" accept="image/*" ref="constructionUnitBusinessLicenseUrl" @change="beforeUpload(uploadName)" v-show="false" />
    <input type="file" name="file" accept="image/*" ref="constructionUnitLegalRepresentativeIDCardUrl" @change="beforeUpload(uploadName)" v-show="false" />
    <input type="file" name="file" accept="image/*" ref="constructionUnitLegalRepresentativeIDCardOppositeUrl" @change="beforeUpload(uploadName)" v-show="false" />
    <input type="file" name="file" accept="image/*" ref="constructionUnitHeadIDCardUrl" @change="beforeUpload(uploadName)" v-show="false" />
    <input type="file" name="file" accept="image/*" ref="constructionUnitHeadIDCardOppositeUrl" @change="beforeUpload(uploadName)" v-show="false" />

    <a-descriptions title="" layout="vertical" bordered size="small">
      <a-descriptions-item label="工程名称:"> {{ data.projectName }} </a-descriptions-item>
      <a-descriptions-item label="建设单位:"> {{ data.ownerUnit }} </a-descriptions-item>
      <a-descriptions-item label="建设单位电话:"> {{ data.ownerUnitPhone }} </a-descriptions-item>
      <a-descriptions-item label="施工单位:"> {{ data.constructionUnit }} </a-descriptions-item>

      <a-descriptions-item label="施工单位营业执照照片:">
        <!-- <a-upload :remove="handleRemove" :beforeUpload="beforeUpload1" style="display: inline-block; margin-left: 14px"> -->
        <img v-if="data.constructionUnitBusinessLicenseUrl" :src="getImg(data.constructionUnitBusinessLicenseUrl)"
          @click="takePhoto('constructionUnitBusinessLicenseUrl')" alt="" class="avatar-uploader" />
        <div v-else class="avatar-uploader" @click="takePhoto('constructionUnitBusinessLicenseUrl')">
          <a-icon :type="'plus'" />
          <div class="ant-upload-text">上传照片</div>
        </div>
        <!-- </a-upload> -->
        <!-- <a-button type="primary" :disabled="constructionUnitBusinessLicenseUrl.length === 0" class="marginL10"
          @click="onUploadFile('constructionUnitBusinessLicenseUrl')">上传</a-button> -->
        <div><a-icon type="info-circle" theme="filled" style="color: orange" /> 如施工单位是个人，无需上传。</div>
      </a-descriptions-item>
      <a-descriptions-item label="施工单位法定代表人身份证照片(正面):">
        <!-- <a-upload :remove="handleRemove" :beforeUpload="beforeUpload2" style="display: inline-block; margin-left: 14px"> -->
        <img v-if="data.constructionUnitLegalRepresentativeIDCardUrl"
          @click="takePhoto('constructionUnitLegalRepresentativeIDCardUrl')"
          :src="getImg(data.constructionUnitLegalRepresentativeIDCardUrl)" alt="" class="avatar-uploader" />
        <div v-else class="avatar-uploader" @click="takePhoto('constructionUnitLegalRepresentativeIDCardUrl')">
          <a-icon :type="'plus'" />
          <div class="ant-upload-text">上传照片</div>
        </div>
        <!-- </a-upload> -->
        <!-- <a-button type="primary" :disabled="constructionUnitLegalRepresentativeIDCardUrl.length === 0" class="marginL10"
          @click="onUploadFile('constructionUnitLegalRepresentativeIDCardUrl')">上传</a-button> -->
        <div><a-icon type="info-circle" theme="filled" style="color: orange" /> 如施工单位是个人，无需上传。</div>
      </a-descriptions-item>
      <a-descriptions-item label="施工单位法定代表人身份证照片(反面):">
        <!-- <a-upload :remove="handleRemove" :beforeUpload="beforeUpload22" style="display: inline-block; margin-left: 14px"> -->
        <img v-if="data.constructionUnitLegalRepresentativeIDCardOppositeUrl"
          @click="takePhoto('constructionUnitLegalRepresentativeIDCardOppositeUrl')"
          :src="getImg(data.constructionUnitLegalRepresentativeIDCardOppositeUrl)" alt="" class="avatar-uploader" />
        <div v-else class="avatar-uploader" @click="takePhoto('constructionUnitLegalRepresentativeIDCardOppositeUrl')">
          <a-icon :type="'plus'" />
          <div class="ant-upload-text">上传照片</div>
        </div>
        <!-- </a-upload> -->
        <!-- <a-button type="primary" :disabled="constructionUnitLegalRepresentativeIDCardOppositeUrl.length === 0" class="marginL10"
          @click="onUploadFile('constructionUnitLegalRepresentativeIDCardOppositeUrl')">上传</a-button> -->
        <div><a-icon type="info-circle" theme="filled" style="color: orange" /> 如施工单位是个人，无需上传。</div>
      </a-descriptions-item>

      <a-descriptions-item>
        <span slot="label"><i class="i"> * </i> 施工单位负责人身份证照片(正面): </span>
        <!-- <a-upload :remove="handleRemove" :beforeUpload="beforeUpload3" style="display: inline-block; margin-left: 14px"> -->
        <img v-if="data.constructionUnitHeadIDCardUrl" :src="getImg(data.constructionUnitHeadIDCardUrl)"
          @click="takePhoto('constructionUnitHeadIDCardUrl')" alt="" class="avatar-uploader" />
        <div v-else class="avatar-uploader" @click="takePhoto('constructionUnitHeadIDCardUrl')">
          <a-icon :type="'plus'" />
          <div class="ant-upload-text">上传照片</div>
        </div>
        <!-- </a-upload> -->
        <!-- <a-button type="primary" :disabled="constructionUnitHeadIDCardUrl.length === 0" class="marginL10"
          @click="onUploadFile('constructionUnitHeadIDCardUrl')">上传</a-button> -->
        <div><a-icon type="info-circle" theme="filled" style="color: orange" /> 如施工单位是个人，请上传施工单位负责人身份证照片(正面)。</div>
      </a-descriptions-item>
      <a-descriptions-item>
        <span slot="label"><i class="i"> * </i> 施工单位负责人身份证照片(反面):</span>
        <!-- <a-upload :remove="handleRemove" :beforeUpload="beforeUpload33" style="display: inline-block; margin-left: 14px"> -->
        <img v-if="data.constructionUnitHeadIDCardOppositeUrl" :src="getImg(data.constructionUnitHeadIDCardOppositeUrl)"
          @click="takePhoto('constructionUnitHeadIDCardOppositeUrl')" alt="" class="avatar-uploader" />
        <div v-else class="avatar-uploader" @click="takePhoto('constructionUnitHeadIDCardOppositeUrl')">
          <a-icon :type="'plus'" />
          <div class="ant-upload-text">上传照片</div>
        </div>
        <!-- </a-upload> -->
        <!-- <a-button type="primary" :disabled="constructionUnitHeadIDCardOppositeUrl.length === 0" class="marginL10"
          @click="onUploadFile('constructionUnitHeadIDCardOppositeUrl')">上传</a-button> -->
        <div><a-icon type="info-circle" theme="filled" style="color: orange" /> 如施工单位是个人，请上传施工单位负责人身份证照片(反面)。</div>
      </a-descriptions-item>
      <!-- 签字 -->
      <a-descriptions-item>
        <span slot="label"><i class="i"> * </i> 施工单位负责人签名:</span>
        <div v-if="!data.constructionUnitHeadSignUrl">
          <vue-esign ref="esign" :width="800" :height="1800" style="border: 1px dashed #c2c1c1" :isCrop="isCrop"
            :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
          <button @click="handleReset">清空签名</button>
          <button @click="handleGenerate">保存签名</button>
        </div>
        <div v-else>
          <img :src="getImg(data.constructionUnitHeadSignUrl)" @click="data.constructionUnitHeadSignUrl = null" alt=""
            class="avatar-uploader" style="width: 230px; height: 160px;" />
        </div>
      </a-descriptions-item>
    </a-descriptions>

    <div style="height: 40px">
      <a-button type="primary" @click="submit" block>保存</a-button>
    </div>

  </div>
</template>
<script>
import { GetProjectByEncryptionID, SaveConstructionUnit } from '@/api/project'
import { uploadFile } from '@/api/upload'
import { tranDate } from '@/utils/util'
import vueEsign from 'vue-esign'
export default {
  components: { vueEsign },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        projectName: '',
        ownerUnit: '',
        ownerUnitPhone: '',
        constructionUnit: '',
        constructionUnitBusinessLicenseUrl: '',
        constructionUnitLegalRepresentativeIDCardUrl: '',
        constructionUnitLegalRepresentativeIDCardOppositeUrl: '',
        constructionUnitHeadIDCardUrl: '',
        constructionUnitHeadIDCardOppositeUrl: '',
        constructionUnitHeadSignUrl: '',
      },
      data: {},
      fileList: [],
      constructionUnitBusinessLicenseUrl: [],
      constructionUnitLegalRepresentativeIDCardUrl: [],
      constructionUnitLegalRepresentativeIDCardOppositeUrl: [], // 法人人身份证反面
      constructionUnitHeadIDCardUrl: [],
      constructionUnitHeadIDCardOppositeUrl: [], // 负责人身份证反面
      constructionUnitHeadSignUrl: [],
      lineWidth: 6,
      lineColor: '#000000',
      bgColor: '',
      resultImg: '',
      isCrop: false,

      uploadName: ''
    }
  },
  created() {
    const encryptionID = this.$route.query.encryptionID
    this.initData(encryptionID)
  },
  mounted() {
  },
  methods: {
    initData(p) {
      const param = {
        encryptionID: p,
      }
      GetProjectByEncryptionID(param)
        .then((res) => {
          this.data = res.data
          this.data.startDate = tranDate(this.data.startDate)
          this.data.endDate = tranDate(this.data.endDate)
        })
        .catch()
    },
    handleRemove(file) { },
    async beforeUpload(uploadName) {
      const file = this.$refs[uploadName].files
      debugger
      this[uploadName] = await file
      this.onUploadFile(uploadName)
    },
    // beforeUpload1() {
    //   const file = this.$refs.file.files
    //   this.constructionUnitBusinessLicenseUrl = file
    //   return false
    // },
    // beforeUpload2(file) {
    //   this.constructionUnitLegalRepresentativeIDCardUrl = file
    //   return false
    // },
    // beforeUpload22(file) {
    //   this.constructionUnitLegalRepresentativeIDCardOppositeUrl = file
    //   return false
    // },
    // beforeUpload3(file) {
    //   this.constructionUnitHeadIDCardUrl = file
    //   return false
    // },
    // beforeUpload33(file) {
    //   this.constructionUnitHeadIDCardOppositeUrl = file
    //   return false
    // },
    getImg(str) {
      const url = `${process.env.VUE_APP_API_BASE_URL}${str}`
      return url
    },
    onUploadFile(fileListName) {
      const fileList = this[fileListName]
      const formData = new FormData()
      // fileList.forEach((file) => {
      // formData.append('files[]', file)
      formData.append('files', fileList[0])
      // })
      // this.uploading = true
      uploadFile(formData).then((res) => {
        if (res != null) {
          this.data[fileListName] = res.Path + '/' + res.NewFileName
          this.$message.success('上传成功!')
          this[fileListName] = []
        } else {
          this.$message.error('上传失败!')
          this[fileListName] = []
        }
      })
    },
    /**
     * 清空签名
     */
    handleReset() {
      this.$refs.esign.reset()
    },
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, { type: mime })
    },
    /**
     * 生成签名图片
     */
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          const file = this.base64toFile(res)

          const formData = new FormData()
          formData.append('file[]', file)
          uploadFile(formData).then((res) => {
            if (res != null) {
              this.data.constructionUnitHeadSignUrl = res.Path + '/' + res.NewFileName
              this.$message.success('上传成功!')
              this.constructionUnitHeadSignUrl = []
            } else {
              this.$message.error('上传失败!')
              this.constructionUnitHeadSignUrl = []
            }
          })
        })
        .catch((err) => {
          alert(err) // 画布没有签字时会执行这里 'Not Signned'
        })
    },
    submit() {
      // const url = this.data.constructionUnitBusinessLicenseUrl
      // if (url === null || url === '' || url === undefined) {
      //   this.$message.error('施工单位营业执照照片必填!')
      //   return
      // }
      let url = this.data.constructionUnitHeadIDCardUrl
      if (url === null || url === '' || url === undefined) {
        this.$message.error('施工单位负责人身份证照片(正面)必填!')
        return
      }
      url = this.data.constructionUnitHeadIDCardOppositeUrl
      if (url === null || url === '' || url === undefined) {
        this.$message.error('施工单位负责人身份证照片(反面)必填!')
        return
      }
      url = this.data.constructionUnitHeadSignUrl
      if (url === null || url === '' || url === undefined) {
        this.$message.error('施工单位负责人签名必填!')
        return
      }
      const param = {
        ProjectID: this.data.id,
        ConstructionUnitBusinessLicenseUrl: this.data.constructionUnitBusinessLicenseUrl,
        ConstructionUnitLegalRepresentativeIDCardUrl: this.data.constructionUnitLegalRepresentativeIDCardUrl,
        ConstructionUnitLegalRepresentativeIDCardOppositeUrl: this.data.constructionUnitLegalRepresentativeIDCardOppositeUrl,
        ConstructionUnitHeadIDCardUrl: this.data.constructionUnitHeadIDCardUrl,
        ConstructionUnitHeadIDCardOppositeUrl: this.data.constructionUnitHeadIDCardOppositeUrl,
        ConstructionUnitHeadSignUrl: this.data.constructionUnitHeadSignUrl,
      }
      SaveConstructionUnit(param)
        .then((res) => {
          this.$message.success(res.message)
          this.$router.push({ path: '/200' })
        })
        .catch((err) => this.$message.error(err.message))
    },
    takePhoto(uploadName) {
      this.uploadName = uploadName
      this.$refs[uploadName].click()
    }
  },
}
</script>
<style>
.mobile {
  margin: 1rem;
}

.ant-list-item-meta-description {
  color: #3b3b3b;
}

.detail {
  color: #626263;
}

.avatar-uploader {
  width: 80px;
  height: 80px;
  padding: 10px 10px;
  border: 1px #e6e6e6 solid;
  text-align: center;
}

/* .ant-upload-list-text {
  display: none;
} */

.i {
  color: red;
}

.ant-descriptions-item-label {
  background: #e7e7e7;
}

.marginL10 {
  margin-left: 10px;
}
</style>
